import React from 'react';
import { render } from 'react-dom';
import { Layout, Menu, Breadcrumb, Icon, Avatar } from 'antd';

import { MainMyItemsComponent } from './main.myItems';
import { MainOptionComponent as MainIWantComponent } from './main.IWant';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const element = document.getElementById('root');
class MainComponent extends React.Component {
    constructor() {
        super();
        this.state = { content: 'myItem' };
    }

    menuClick = (item)=>{
        var key = item.key;
        console.log(key);

        if (this.state.content == key) {
            return;
        }
        this.setState({ content: key });
    }

    getComponents = () => {
        switch (this.state.content) {
            case 'myItem':
                return <MainMyItemsComponent />;
            case 'IWant':
                return <MainIWantComponent />;
            default:
                return "Empty";
        }
    };

    render() {
        var userName = element.attributes["data-user"].value;
        var avatarUrl = element.attributes['avatar-url'].value;

        return(
            <Layout>
                <Header className="header">
                    <a href="/">
                        <div className="logo" style={{ lineHeight: "28px", paddingLeft: "10px" }}>
                            Home Page
                        </div>
                    </a>
                    
                    <a href="/logout" style={{float:"right"}}>Log out</a>
                    <span style={{float:"right",
                                    display: "inline-block",    
                                    color: "wheat",    
                                    "fontSize": "23px",    
                                    "paddingRight": "12px"}}>{userName}</span>
                    
                    <Avatar src={avatarUrl} style={{float:"right", margin: "17px 4px", display: avatarUrl?"inline-block":"none" }}/>
                    
                    <Avatar icon="user" style={{float:"right", margin: "17px 4px", display: !avatarUrl?"inline-block":"none"}}/>
                </Header>
                <Layout>
                    <Sider width={200} style={{ background: '#fff' }}>
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0 }}
                            onClick={data=>this.menuClick(data)}
                        >
                            <SubMenu
                                key="sub1"
                                title={
                                    <span>
                                        <Icon type="shopping" />
                                        Items
                                    </span>
                                }
                            >
                                <Menu.Item key="myItem">My Items</Menu.Item>
                                <Menu.Item key="IWant">I Want</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        {/* <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb> */}
                        <Content
                            style={{
                                background: '#fff',
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            {/* <MainMyItemsComponent></MainMyItemsComponent> */}
                            {/* <MainOptionComponent></MainOptionComponent> */}
                            {
                                this.getComponents()
                            }
                </Content>
                    </Layout>
                </Layout>
            </Layout>
        );
    };
}

render(<MainComponent />, element);
